import { IThemeColor } from '../../../../../type/index';
interface IIndicator {
  name: string;
  max?: number;
  min?: number;
  color?: string;
}

export const initScoreRadar = (
  echarts: any,
  dom: HTMLElement,
  valueData: number[],
  labelData: string[],
  aveScore: number,
  themeColor: IThemeColor
) => {
  const charts = echarts.init(dom);
  let indicator = [] as IIndicator[];
  labelData.forEach(item => {
    indicator.push({ name: item, max: 100 });
  });
  charts.setOption({
    title: [
      {
        text: `擅长科目分析`,
        textStyle: {
          color: themeColor.font,
          fontSize: 16,
          fontWeight: 'normal',
        },
        padding: [16, 0, 0, 16],
      },
      {
        text: `平均分:${aveScore} (不包括0分科目)`,
        textStyle: {
          color: themeColor.font,
          fontSize: 16,
          fontWeight: 'normal',
        },
        top: '10',
        right: '16',
      },
    ],
    // backgroundColor: '#0D2753',
    tooltip: {
      show: false,
      // textStyle: {
      //   color: themeColor.font,
      // },
      // confine: true, //tooltip提示框不超出div边界
      // enterable: true, //鼠标是否可以移动到tooltip区域内
      // backgroundColor: themeColor.main,
    },
    radar: {
      axisName: {
        textStyle: {
          // color: themeColor.font,
          color: '#629bdd',
          fontSize: 14,
        },
      },
      shape: 'polygon',
      center: ['50%', '55%'],
      radius: '65%',
      // startAngle: 120,
      // scale: true,
      axisLine: {
        lineStyle: {
          color: '#629bdd',
          // color: 'rgba(5, 213, 255, .8)',
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          width: 2,
          color: '#629bdd',
          // color: 'rgba(5, 213, 255, .8)', // 设置网格的颜色
        },
      },
      //外圈文字的配置(name,max,min,color)
      indicator: indicator,
      //类似斑马纹
      splitArea: {
        show: false,
      },
    },
    // grid: {
    //   left: '15%',
    //   right: '15%',
    //   top: '25%',
    //   bottom: '12%',
    // },
    polar: {
      center: ['50%', '55%'], // 默认全局居中
      radius: '0%',
    },
    angleAxis: {
      min: 0,
      interval: 5,
      clockwise: false,
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    radiusAxis: {
      min: 0,
      interval: 20,
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        name: '个人雷达图',
        type: 'radar',
        symbol: 'circle', // 拐点的样式，还可以取值'rect','angle'等
        symbolSize: 10, // 拐点的大小
        itemStyle: {
          color: '#629bdd', //拐点颜色
          // color: '#05D5FF',
        },
        areaStyle: {
          color: '#629bdd', //区域颜色
          // color: '#05D5FF',
          opacity: 0.5,
        },
        lineStyle: {
          width: 2,
          color: '#629bdd', //区域边框线颜色
          // color: '#05D5FF',
        },
        label: {
          show: true,
          formatter: (params: any) => {
            return params.value;
          },
          color: themeColor.font,
        },
        data: [
          {
            value: valueData,
          },
        ],
      },
    ],
  });
};
